<template>
	<view>
		<u-navbar title="编辑">
		</u-navbar>
		<view class="form-box">
			<u-card :show-head="false">
				<view slot="body" @click="handleEditForm">
					<view class="u-line-1">
						<text class="u-font-xl">{{ formInfo.name }}</text>
					</view>
					<view class="u-line-1">{{ formInfo.description }}</view>
				</view>
			</u-card>
			<view class="form-list">
				<view  v-for="item in formItemList" :key="item.dId" class="item" @tap="handleOpenComConfig(item)">
					<view class="u-flex u-row-between label" >
						<view class="u-p-l-10" >
							<text class="u-font-lg" v-if="item.config.showLabel">{{ item.config.label }}</text>
						</view>
						<view @tap.stop="handleOpenAction(item)">
							<u-icon name="more-dot-fill u-p-r-20"></u-icon>
						</view>
					</view>
					<view class="coms">
						<u-number-box v-model="item.config.defaultValue" v-if="item.typeId=='NUMBER'"
									  disabled></u-number-box>
						<u-input v-model="item.config.defaultValue" v-if="item.typeId=='INPUT'" :border="true" disabled>
						</u-input>
						<u-input v-model="item.config.defaultValue" type="textarea" v-if="item.typeId=='TEXTAREA'"
								 :border="true" disabled></u-input>
						<u-input v-model="item.config.defaultValue" v-if="item.typeId=='SELECT'" :border="true"
								 disabled></u-input>
						<u-input v-model="item.config.defaultValue" v-if="item.typeId=='DATEs'" :border="true" disabled>
						</u-input>
						<u-radio-group v-model="item.config.defaultValue" v-if="item.typeId=='RADIO'" wrap>
							<u-radio v-for="(item, index) in item.config.options" :key="index" :name="item.value"
									 disabled>
								{{ item.label }}
							</u-radio>
						</u-radio-group>
						<u-checkbox-group v-if="item.typeId=='CHECKBOX'" wrap>
							<u-checkbox v-for="(item, index) in item.config.options" :key="index" :name="item.value">
								{{ item.label }}
							</u-checkbox>
						</u-checkbox-group>
						<u-rate :count="item.max" v-model="item.config.defaultValue" v-if="item.typeId=='RATE'"
								disabled></u-rate>
						<u-image width="100%" height="100rpx" :src="item.src" v-if="item.typeId=='IMAGE'"></u-image>
						<u-parse v-html="item.content" v-if="item.typeId=='DESC_TEXT'"></u-parse>
						<u-divider v-if="item.typeId=='DIVIDER'" fontSize="50"></u-divider>
						<u-slider v-if="item.typeId=='SLIDER'" disabled></u-slider>
					</view>
				</view>
			</view>
			<u-card :show-head="false">
				<view slot="body" class="u-text-center" @click="comsShow=true">
					<u-icon name="plus" color="#2979ff" size="28"></u-icon>
					添加题目
				</view>
			</u-card>
		</view>
		<view class="btn-fixed-bottom">
			<u-button type="primary" @click="handlePublish">
				<u-icon name="share"></u-icon>
				发布
			</u-button>
		</view>
		<u-action-sheet :list="actionList" v-model="actionShow" @click="handleClickAction"></u-action-sheet>
		<u-popup v-model="comsShow" mode="bottom" height="70%" :closeable="true">
			<view class="u-m-t-80">
				<u-card title="基础组件">
					<view slot="body">
						<u-grid :col="3">
							<u-grid-item v-for="com in basicComponents" :key="com.typeId"
										 @click="handleOpenComConfig(com)">
								<u-icon :name="com.config.tagIcon" custom-prefix="tduck-icon" size="46" color="#888888">
								</u-icon>
								<view class="grid-text">{{ com.config.label }}</view>
							</u-grid-item>
						</u-grid>
					</view>
				</u-card>
			</view>
		</u-popup>
		<u-popup v-model="configShow" mode="bottom" height="100%">
			<view v-if="configShow">
				<form-item-config :com.sync="selectedCom"
								  @change="handleChangeCom"
								  @close="handleCloseComConfig" :formKey="formInfo.formKey">
				</form-item-config>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {basicComponents} from './config.js'
import {dbDataConvertForItemJson, formItemConvertData} from './config/convert.js'
import FormItemConfig from './config/index.vue'
import _ from "lodash";

export default {
	name: 'DesignForm',
	props: {
		formId: ''
	},
	components: {
		FormItemConfig
	},
	data() {
		return {
			comsShow: false,
			configShow: false,
			actionShow: false,
			// 选中组件
			selectedCom: {},
			basicComponents: basicComponents,
			formInfo: {},
			formItemList: [],
			actionList: [{
				text: '复制'
			}, {
				text: '排序'
			},
				{
					text: '编辑'
				},
				{
					color: 'red',
					text: '删除'
				}
			],
		};
	},
	onLoad(options) {
		this.formId = options.formId
		this.$u.api.form.getFormInfo(this.formId).then(data => {
			this.formInfo = data
			this.getFormItemList()
		})
		uni.$on('refreshData',() => {
			this.getFormItemList()
		})
	},
	methods: {
		handleEditForm() {
			uni.navigateTo({
				url: '/pages/form/create?formKey=' + this.formInfo.formKey
			})
		},
		handlePublish() {
			this.$u.api.form.publishForm(this.formInfo).then(res => {
				this.$u.toast('发布成功')
				uni.redirectTo({
					url: '/pages/form/share?formKey=' + this.formInfo.formKey
				})
			})
		},
		handleOpenComConfig(com) {
			this.comsShow = false
			this.configShow = true
			this.selectedCom = com
		},
		handleCloseComConfig() {
			this.configShow = false
			this.getFormItemList()
		},
		handleChangeCom(com) {
			this.selectedCom = com
		},
		handleOpenAction(com) {
			console.log(com)
			this.actionShow = true
			this.selectedCom = com
		},
		handleClickAction(index) {
			if (index == 0) {
				this.copyFormItem();
			} else if (index == 3) {
				this.deleteFormItem();
			} else if (index == 2) {
				this.handleOpenComConfig(this.selectedCom);
			}else if (index == 1) {
				uni.navigateTo({
					url: '/pages/form/design/sort/index?formKey=' + this.formInfo.formKey
				})
			}
		},
		copyFormItem() {
			let data = formItemConvertData(this.selectedCom, this.formInfo.formKey)
			data.formItemId = `${_.toLower(this.selectedCom.typeId)}-${new Date().getTime()}`
			this.$u.api.form.createFormItem(data).then(data => {
				this.$u.toast('复制成功')
				this.getFormItemList()
			})
		},
		deleteFormItem() {
			let data = formItemConvertData(this.selectedCom, this.formInfo.formKey)
			this.$u.api.form.deleteFormItem(data).then(data => {
				this.$u.toast('删除成功')
				this.getFormItemList()
			})
		},
		getFormItemList() {
			this.$u.api.form.getFormItemList({
				key: this.formInfo.formKey
			}).then(data => {
				this.formItemList = data.map(item => dbDataConvertForItemJson(item))
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.form-box{
	padding-bottom:calc( var(--window-bottom) + 90rpx);
}
.form-list {
	.item {
		font-size: 15px;
		background-color: #ffffff;
		box-sizing: border-box;
		border-radius: 8px;
		margin: 16px;
		box-shadow: none;
		padding: 20rpx 16rpx !important;

		.label {
			height: 42rpx;
		}

		.coms {
			padding: 10rpx;
			margin: 10rpx 0px;
		}
	}
}
</style>
